<div class="graph" [class.disableSelection]="resizing">
    <app-workflowv3-stages-graph [workflowRun]="data" [direction]="direction" (onSelectJob)="clickShowJobLogs($event)"
        #graph></app-workflowv3-stages-graph>
    <app-resizable-panel [direction]="'vertical'" minSize="200" [initialSize]="infoPanelSize"
        (onGrabbingStart)="panelStartResize()" (onGrabbingEnd)="infoPanelEndResize($event)">
        <app-tabs [tabs]="tabs" (onSelect)="selectTab($event)"></app-tabs>
        <ng-containers *ngIf="selectedTab.key === 'problems'">
            <ul class="infos">
                <li *ngFor="let error of errors">
                    <span class="error" nz-icon nzType="close-circle" nzTheme="fill"></span>
                    <div class="content">
                        Job "{{error.jobName}}": error on step
                        n°{{error.stepNumber}}. <a (click)="clickShowJobLogs(error.jobName)">Show
                            logs...</a>
                    </div>
                </li>
                <li *ngFor="let problem of problems">
                    <span class="warning" nz-icon nzType="warning" nzTheme="fill"></span>
                    <div class="content">
                        {{problem}}.
                    </div>
                </li>
            </ul>
        </ng-containers>
        <ng-containers *ngIf="selectedTab.key === 'infos'">
            <ul class="infos">
                <li *ngFor="let info of infos">
                    <span class="info" nz-icon nzType="info-circle" nzTheme="fill"></span>
                    <div class="content">
                        {{info}}.
                    </div>
                </li>
            </ul>
        </ng-containers>
        <ng-containers *ngIf="selectedTab.key === 'results'">
            <ul class="infos">
                <li *ngFor="let result of results">
                    <div class="rightFloat content">
                        {{result.type}}
                        <a *ngIf="!!result.md5" title="Copy hash" ngxClipboard [cbContent]="result.md5"
                            (click)="confirmCopy();$event.stopPropagation();">
                            <span nz-icon nzType="copy" nzTheme="outline"></span>
                        </a>
                    </div>
                    <div class="content">
                        <a [href]="result.link" target="_blank">
                            {{result.name}}
                        </a>
                        ({{result.human_size}})
                    </div>
                </li>
            </ul>
        </ng-containers>
    </app-resizable-panel>
</div>
<app-resizable-panel *ngIf="selectJobRun" minSize="400" [initialSize]="jobPanelSize"
    (onGrabbingStart)="panelStartResize()" (onGrabbingEnd)="jobPanelEndResize($event)">
    <app-workflowv3-run-job [projectKey]="projectKey" [workflowName]="data.resources.workflow.name"
        [workflowRunNum]="data.number" [jobRun]="selectJobRun" (onClickClose)="closeJobPanel()" #v3RunJob>
    </app-workflowv3-run-job>
</app-resizable-panel>
